<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:09:00
-->
<template>
  <div class="head">
    <div class="wrapper">
      <div class="logo">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910012346051241-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634634129&t=038bbe7e3cb4e9b67d43a691f3c74408" alt="">
      </div>
      <div class="title" @click="toHomeHandler()">行学天下</div>
      <div class="category">
        <ul>
          <li @click="toListHandler(item.id)" v-for='item in categorys' :key='item.id'>{{item.name}}</li>
        </ul>
      </div>
      <div class="contact" @click="contactHandler()">联系我们</div>
    </div>
  </div>
</template>


<script>
//引入axios
import {get} from '../../utils/request'
export default {
  //存放数据
  data(){
    return{
      //所有分类信息
      categorys:[]
    }
  },
  //存放方法
  methods:{
    //查询所有分类信息
    findAllCategory(){
      //数据交互
      get('/index/category/findCategoryTree').then(res=>{
        console.log(res)
        if(res.status==200){
          this.categorys=res.data
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },

    //跳转到联系我们页面
    contactHandler(){
      //alert(999)    //测试单击事件有没有绑成功

      //跳转页面
      this.$router.push({path:'/contact'})
    },

    //跳转到首页
    toHomeHandler(){
     // alert(999)    //测试

     //跳转页面
     this.$router.push({path:'/home'})
    },

    //跳转到List页面
    toListHandler(id){
      this.$router.push({path:'/list',query:{categoryId:id}})
    }

  },
  //生命周期钩子函数，页面加载完之后
  created(){
    //调用所有查询栏目的方法
    this.findAllCategory()
  }
  }
</script>


<style scoped lang='scss'>
.head{
  box-shadow: 0 1px 5px #ccc;
  padding: .5em 0;
}
.wrapper{
  width: 90%;
  height: 60px;
  // background-color: aquamarine;
  line-height: 60px;

  .logo{
    float: left;
    cursor: pointer;
    width: 60px;
    height: 60px;
    
    img{
    width: 60px;
    height: 60px;
    }
  }
  .title{
    float: left;
    font-size: 20px;
    font-weight: 700;
    padding: 0 1em;
    cursor: pointer;
  }
  .category{
    float: left;
    ul li{
      float: left;
      padding: 0 2em;
      cursor: pointer;
    }
  }
  .contact{
    float: right;
    cursor: pointer;
  }
}
</style>
